<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系统首页</title>
    <link rel="stylesheet" href="/static/css/element-ui/element-ui.css">
    <link rel="stylesheet" href="/static/css/public.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/public.js"></script>
    <style>
        .el-menu--popup {
            min-width: 150px;
        }

        .el-divider--horizontal {
            margin-bottom: 0;
        }

        .el-menu--horizontal > .el-menu-item, .el-menu--horizontal > .el-submenu .el-submenu__title {
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div v-cloak id="app">
    <h3 class="text-center">{{currentDept.name}}</h3>
    <el-divider></el-divider>
    <el-row style="margin: 0 5px">
        <el-col :span="22" :xs="22">
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                <template v-for="obj in menuList">
                    <el-submenu v-if="obj.children.length>0" :index="obj.url">
                        <template slot="title">{{obj.name}}</template>
                        <el-menu-item v-for="item in obj.children" :index="item.url">{{item.name}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :index="obj.url">{{obj.name}}</el-menu-item>
                </template>
            </el-menu>
        </el-col>
        <el-col :span="2" :xs="2">
            <el-menu mode="horizontal">
                <el-submenu index="5">
                    <template slot="title">${nickname}</template>
                    <el-menu-item @click="logout">退出登录</el-menu-item>
                    <el-menu-item v-if="deptList.length > 1" @click="switchDept">切换部门</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-col>
    </el-row>
    <iframe :src="currentUrl" onload="this.height=window.screen.availHeight-250" width="100%"
            frameborder="0"></iframe>

    <el-drawer
            title="切换系统"
            :visible.sync="drawer"
            direction="rtl">
        <div class="plr-25">

            <div class="mt-15" v-for="obj in deptList">
                <el-radio v-model="currentDeptId" @change="deptChange" :label="obj.id">{{obj.name}}</el-radio>
            </div>
        </div>
    </el-drawer>
</div>
<script>
    $(function () {
        methods.getUserMenu();
    });

    var data = {
        closable: false,
        activeIndex: "/admin/workbench/workbench_index",
        currentUrl: "/admin/workbench/workbench_index",
        menuList: [],
        deptList: [],
        currentDept: {},
        currentDeptId: "",
        drawer: false
    };

    var methods = {
        deptChange: function () {
            for (var i = 0; i < data.deptList.length; i++) {
                var dept = data.deptList[i];
                if (data.currentDeptId == dept.id) {
                    data.currentDept = dept;
                    break;
                }
            }
        },
        //切换部门
        switchDept: function () {
            data.drawer = true;
        },
        //获取用户菜单
        getUserMenu: function () {
            ajax.post("/system/user/getUserMenu", function (res) {
                data.menuList = res.data;
            })
        },
        //获取用户部门
        getUserDept: function () {
            ajax.post("/system/user/getUserDept", function (res) {
                console.log(res);
                data.deptList = res.data;
                if (res.data.length > 0) {
                    data.currentDept = res.data[0];
                    data.currentDeptId = data.currentDept.id;
                }
            })
        },
        handleSelect: function (key, keyPath) {
            data.currentUrl = key;
        },
        //退出登录
        logout: function () {
            layer.confirm("您确定要退出本系统吗？", function (index) {
                layer.close(index);
                window.location.href = "/system/logout";
            });
        }
    };
    var vm = new Vue({
        data: data, methods: methods, created: function () {
            methods.getUserMenu();
            methods.getUserDept();
        }
    }).$mount("#app");
</script>
</body>
</html>
